/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div>
    <!-- 常用促销 -->
    <div class="menu">
      <div class="content">
        <p class="title">
          常用促销
          <span>吸粉、老客带新客，提高下单转化率</span>
        </p>
        <ul class="clearfloat">
          <div v-for="(item,index) in sales" :key="index">
            <router-link class="link" active-class="active" :to="item.link">
              <li>
                <img :src="item.imgUrl" alt />
                <p>{{item.title}}</p>
                <span>{{item.text}}</span>
              </li>
            </router-link>
          </div>
        </ul>
      </div>
    </div>
    <!-- 拼团购 -->
    <div class="menu">
      <div class="content">
        <p class="title">
          拼团购
          <span>最火爆的引流、拉新和促销的方式</span>
        </p>
        <ul class="clearfloat">
          <div v-for="(item,index) in group" :key="index">
            <router-link class="link" active-class="active" :to="item.link">
              <li>
                <img :src="item.imgUrl" alt />
                <p>{{item.title}}</p>
                <span>{{item.text}}</span>
              </li>
            </router-link>
          </div>
        </ul>
      </div>
    </div>
    <!-- 优惠劵 -->
    <div class="menu">
      <div class="content">
        <p class="title">
          优惠劵
          <span>不同类型优惠劵针对性营销</span>
        </p>
        <ul class="clearfloat">
          <div v-for="(item,index) in coupon" :key="index">
            <router-link class="link" active-class="active" :to="item.link">
              <li>
                <img :src="item.imgUrl" alt />
                <p>{{item.title}}</p>
                <span>{{item.text}}</span>
              </li>
            </router-link>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      sales: [
        //常用促销
        {
          imgUrl: require("@/static/images/purchase.png"),
          title: "抢购/秒杀",
          text: "快速抢购引导顾客更多消费",
          link: "/index/marketing/flash_sale"
        },
        {
          imgUrl: require("@/static/images/group.png"),
          title: "团购",
          text: '批量促销清理库存"',
          link: "/index/marketing/group_buy"
        },
        {
          imgUrl: require("@/static/images/preferential.png"),
          title: "优惠促销",
          text: '对商品本身进行的促销方式"',
          link: "/index/marketing/prom_goods"
        },
        {
          imgUrl: require("@/static/images/promotion.png"),
          title: "订单促销",
          text: '对用户订单进行优惠的促销方式"',
          link: "/index/marketing/prom_order"
        },
        {
          imgUrl: require("@/static/images/presell.png"),
          title: "预售",
          text: '新品销售预估和预热"',
          link: "/index/marketing/pre_sell"
        }
        // {
        // 	imgUrl: require('@/static/images/bargaining.png'),
        // 	title: '砍价',
        // 	text: '拉新引流邀请好友低价购买"'
        // },
      ],
      group: [
        //拼团
        {
          imgUrl: require("@/static/images/share.png"),
          title: "分享团",
          text: '拼团基础版，引流传播利器"',
          link: "/index/marketing/share_team/0"
        },
        {
          imgUrl: require("@/static/images/commission_delegation.png"),
          title: "佣金团",
          text: '团长赚拼团佣金，积极性更高"',
          link: "/index/marketing/share_team/1"
        },
        {
          imgUrl: require("@/static/images/lucky_draw.png"),
          title: "抽奖团",
          text: '设置不同奖品达到趣味营销效果"',
          link: "/index/marketing/share_team/2"
        }
      ],
      coupon: [
        {
          imgUrl: require("@/static/images/coupons.png"),
          title: "优惠劵",
          text: '不同类型优惠劵针对性营销"',
          link: "/index/marketing/coupons"
        },
        {
          imgUrl: require("@/static/images/coupons.png"),
          title: "新人优惠券",
          text: '新人专属优惠劵针对性营销"',
          link: "/index/marketing/newbie_coupons"
        }
      ]
    };
  }
};
</script>
<style scoped>
.menu {
  margin-bottom: 52px;
}

.menu .content .title {
  font-size: 16px;
  color: #1e1e1e;
  border-left: 3px solid #148eff;
  padding-left: 12px;
}

.menu .content p span {
  font-size: 12px;
  color: #999999;
  margin-left: 16px;
}

.menu .content ul li {
  width: 244px;
  height: 48px;
  background-color: #f7f6f6;
  border-radius: 3px;
  float: left;
  margin-right: 27px;
  margin-top: 23px;
  padding: 18px;
  position: relative;
}

/*清除float  */
.clearfloat:after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}

.menu .content ul img {
  width: 50px;
  height: 50px;
}

.menu .content ul p {
  position: absolute;
  color: #1e1e1e;
  font-size: 16px;
  top: 20px;
  left: 84px;
}

.menu .content ul span {
  position: absolute;
  color: #999;
  font-size: 12px;
  top: 50px;
  left: 84px;
}
</style>
